<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02_数组的常用方法</title>
  </head>
  <body>
  <script>
    /* 
    数组常用方法分类(3类)
    1. 更新数组的方法(7个)   => vue中用到
      push / pop / unshift / shift / splice / reverse / sort
    2. 带遍历回调的方法(7个) 
      forEach / filter / map / reduce / find|findIndex / every / some
    3. 其它方法(4个)
      concat / slice / indexOf / includes
    */

    /* 
    1. 更新数组的方法(7个)   => vue中用到
      push / pop / unshift / shift / splice / reverse / sort
    */
    const arr = [3, 2, 5]
    arr.push(4) // [3, 2, 5, 4]
    arr.pop() // [3, 2, 5]
    arr.unshift(4) // [4, 3, 2, 5]
    arr.shift() // [3, 2, 5]
    // arr.splice(1, 1) // [3, 5]  // 删除
    // arr.splice(1, 1, 6) // [3, 6, 5] // 更新/替换
    arr.splice(1, 0, 6) // [3, 6, 2, 5] // 添加
    arr.reverse() // [5, 2, 6, 3]
    // arr.sort() // [2, 3, 5, 6]  // 默认是升序
    arr.sort((item1, item2) => item2-item1)  // 如果回调函数返回值>0, item2放在左边

    // console.log(arr)



    /* 
    需求:
    得到所有商品名与价格的数组, 且价格都翻倍 map
    得到所有价格大于88的所有商品
    找到一个价格小于90的商品
    得到所有价格大于88的所有商品的价格总和
    找到一个价格小于90的商品的下标
    判断是否所有商品价格都小于80
    判断是否有价格小于80的商品
    */
    const products = [
      { id: 1, name: "A", price: 100 },
      { id: 2, name: "B", price: 85 },
      { id: 3, name: "C", price: 90 },
      { id: 4, name: "D", price: 75 },
      { id: 5, name: "E", price: 88 },
    ];
    /* 
    2. 带遍历回调的方法(7个) 
      forEach / filter / map / reduce / find|findIndex / every / some
    */
    // 得到所有商品名与价格的数组, 且价格都翻倍
    // console.log(products.map((item, index) => ({name: item.name, price: item.price*2}))) 

    // 得到所有价格大于88的所有商品
    // console.log(products.filter((item, index) => item.price>88))

    // 找到一个价格小于90的商品
    // console.log(products.find(item => item.price<90))

    // 得到所有价格大于88的所有商品的价格总和  reduce
    // console.log(products.reduce((preTotal, item, index) => preTotal + (item.price>88 ? item.price : 0), 0))

    // 找到一个价格小于90的商品的下标
    // console.log(products.findIndex(item => item.price<90))

    // 判断是否所有商品价格都小于88  false   every
    // console.log(products.every(item => item.price<88))

    // 判断是否有价格小于88的商品  true   some
    // console.log(products.some(item => item.price<88))


    /* 
    3. 其它方法(4个)
      concat / slice / indexOf / includes
    */
   const arr2 = [2, 3]
   console.log(arr2.concat([4, 5], {m: 1}))  // [2, 3, 4, 5, {m: 1}]

   console.log([2, 4, 1, 7].slice(1, 3))  // [4, 1]
   console.log([2, 4, 1, 4, 7].indexOf(4)) // 1
   console.log([2, 4, 1, 4, 7].indexOf(6)) // -1
   console.log([2, 4, 1, 4, 7].includes(6)) // false
   console.log([2, 4, 1, 4, 7].includes(7)) // true

  </script>
  </body>
</html>
